<template>
    <div class="home">
        <scroller
                :on-refresh="refresh"
                :on-infinite="infinite">
            <div class="banner pnel">
                <swiper style="height: 100%;">
                    <swiper-item class="swiper-demo-img" v-for="(item, index) in banners"
                                 :key="index">
                        <a :href="item.link"><img
                                :src="item.cover"
                                alt=""></a>
                    </swiper-item>
                </swiper>
            </div>
            <section class="pnel">
                <h6>热门彩帝</h6>
                <dl class="godlists">
                    <dd v-for="(item,index) in godlists" :key="index" v-if="index<8" @click="jump(item.di.uid)">
                    <span class="headimg">
                        <img :src="item.di.avatar" alt="item.di.nick">
                        <i v-if="item.recommend>0">{{item.recommend}}</i>
                    </span>
                        <strong>{{item.di.nick}}</strong>
                        <b>{{item.di.state}}</b>
                    </dd>
                    <dd v-if="godlists.length>7">
                    <span class="headimg">
                        <img src="//common-1253410441.file.myqcloud.com/activityimg/20171220161626.png" alt="">
                    </span>
                        <strong>更多彩帝</strong>
                        <b style="visibility: hidden">近10中8</b>
                    </dd>
                </dl>
            </section>
            <section class="pnel matchlist">
                <ul>
                    <li v-for="(item,index) in homeplans" :key="index" @click="jumprecommend(item.planId)">
                        <Tophead :avatar="item.expert.avatar"
                                 :nick="item.expert.nick"
                                 :state="item.expert.state"
                                 :combo="item.expert.combo"
                                 :hitRate="item.expert.hitRate | removeper"
                        />
                        <p class="msg">{{item.title}}</p>
                        <Matchmiddle :matches="item.matches"/>
                        <Bottominfo :deadline="item.deadline"
                                    :back="item.back"
                                    :winState="item.winState"
                                    :bean="item.bean"
                        />
                    </li>
                </ul>
            </section>
        </scroller>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import Tophead from '../../components/Tophead';
    import Matchmiddle from '../../components/Matchmiddle';
    import Bottominfo from '../../components/Bottominfo';
    import {getShiLiGodListsR} from '../../service/god';
    import {dropLast, concat} from 'ramda';
    import {isphone} from '../../uitls/common';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {getHomeRecommedR, getsilderR} from '../../service/home';
    import {delay} from '../../uitls/common';
    import {Swiper, SwiperItem, Tabbar, TabbarItem} from 'vux';
    export default {
        components: {
            myButton: Button,
            DomLoad,
            Tophead,
            Matchmiddle,
            Bottominfo,
            Swiper,
            SwiperItem,
            Tabbar,
            TabbarItem,
        },
        data() {
            return {
                godlists: [],
                page: 1,
                homeplans: [],
                banners: []
            }
        },
        filters: {
            removeper(val){
                return dropLast(1, val);
            }
        },
        created() {
            this.getgodilists();
            this.gethomerecomends(1);
            this.getbanners();
        },
        mounted: function () {

        },
        computed: {},
        methods: {
            async getgodilists(){
                const {token}=await getMytoken(true);
                const {data}=await getShiLiGodListsR({token});
                if(data && data.code === 0) {
                    this.godlists = data.data.ranking;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async refresh(done){
                await delay(1000);
                await this.gethomerecomends(1);
                this.getgodilists();
                done();
            },
            async infinite(done){
                await delay(1000);
                this.page = this.page + 1;
                const over = await this.gethomerecomends(this.page, true);
                if(over) {
                    done(true);
                    this.page = this.page - 1;
                    return;
                }
                done();
            },
            async getbanners(){
                const {data}=await getsilderR();
                if(data && data.code === 0) {
                    this.banners = data.data.newses;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }

            },
            async gethomerecomends(page, loadmore){
                const {token}=await getMytoken(true);
                const {data}=await getHomeRecommedR({token, page});
                if(data && data.code === 0) {
                    if(loadmore) {
                        if(data.data.plans.length === 0) {
                            return true;
                        }
                        else {
                            this.homeplans = concat(this.homeplans, data.data.plans);
                        }
                    }
                    else {
                        this.page = 1;
                        this.homeplans = data.data.plans;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                    return true;
                }
            },
            jump(id){
                this.$router.push(`/god/godinfo/${id}`)
            },
            jumprecommend(id){
                this.$router.push(`/matchs/recommendmatchdetails/${id}`)
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .pnel {
        margin-bottom: 10px;
        background: #fff;
        h6 {
            height: 88px;
            font-size: @fz32;
            display: flex;
            align-items: center;
            padding: 0 30px;
        }
    }

    .banner {
        height: 278px;
        img {
            display: block;
            width: 100%;
        }
    }

    .pd30 {
    }

    .matchlist {
        background: #f2f2f2;
        li {
            padding: 30px;
            background: #fff;
            margin-bottom: 10px;
            .msg {
                font-size: @fz28;
                margin-top: 20px;
            }
        }
    }

    .godlists {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        overflow: hidden;
        dd {
            display: flex;
            flex-direction: column;
            width: 25%;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
            .headimg {
                width: 98px;
                height: 98px;
                position: relative;
                margin-bottom: 16px;
                i {
                    width: 30px;
                    position: absolute;
                    background: @color22;
                    .setnormalcss(30px);
                    font-size: @fz24;
                    color: #fff;
                    border-radius: 50%;
                    right: -10px;
                    top: 0;
                }
                img {
                    border-radius: 50%;
                    border: 2px solid #d7d7d7;
                    width: 100%;
                    display: block;
                    height: 100%;
                }
            }
            strong {
                font-size: @fz28;
            }
            b {
                display: block;
                .setnormalcss(26px);
                box-sizing: border-box;
                text-align: center;
                border-radius: 26px;
                font-size: @fz20;
                border: 1px solid @color22;
                color: @color22;
                width: 130px;

            }
        }
    }
</style>